@import "@/base.scss";
@import "~@@/app_style";

//css函数
@function tovmin($rpx) {
  //$rpx为需要转换的字号
  @return #{$rpx * 100 / 750}vmin;
}

.operator-layer {
  width: 100%;
  height: calc(100vh);
  background-image: url(https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/bg.jpg);
  background-color: #333;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.operator-nolayer {
  background: none;
}

.operate {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  right: 0;
  left: 0;
  bottom: 3vh;
  width: fit-content;
  height: 50px;
}

.operate-nolink {
  position: absolute;
  right: 0;
  left: 0;
  width: fit-content;
  height: 80px;
}

.img-box {
  position: relative;
  display: inline-block;
  height: 50px;
  width: 80px;
  vertical-align: middle;
}

.img-view {
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
}

.loading {
  position: absolute;
  width: 100%;
  height: 100%;
}

.loading cover-image {
  position: absolute;
  top: calc(50% - 15px);
  left: calc(50% - 15px);
  width: 30px;
  height: 30px;
}

.close-ico {
  position: absolute;
  top: 0;
  right: 2vw;
  text-align: center;
  font-size: 24px;
  color: #ffffff;
}

.close-ico:hover {
  color: #afafaf;
}

#navBar {
  flex: 1;
  position: fixed;
  left: 0;
  z-index: 98;

  // .navBox {
  //   position: absolute;
  //   left: 0;
  //   border: solid red 1px;

  .navBarTitle {
    height: 100%;
    margin-left: tovmin(30);
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .goback {
      width: tovmin(15);
      height: tovmin(30);
      color: #fff;
    }

    .gohome{
      margin-left: tovmin(15);
      width: tovmin(60);
      height: tovmin(55);
      color: #fff;
    }

    .borderBox {
      width: tovmin(350);
      height: tovmin(70);
      margin-left: tovmin(10);
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: tovmin(100);
      display: flex;
      justify-content: space-between;
      align-items: center;

      .borderLeft {
        margin-left: tovmin(4);
        display: flex;
        justify-content: space-between;

        .tx {
          width: tovmin(64);
          height: tovmin(64);
          border-radius: 50%;
          line-height: tovmin(70);
          margin-top: tovmin(3);

          .tx_img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }

        .information {
          height: tovmin(70);
          margin-left: tovmin(10);
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .ownName {
            max-width: tovmin(140);
            height: tovmin(40);
            font-size: tovmin(27);
            font-family: PingFang SC;
            font-weight: 300;
            line-height: tovmin(40);
            color: #ffffff;
            overflow: hidden; //超出的文本隐藏
            text-overflow: ellipsis; //溢出用省略号显示
            white-space: nowrap; //溢出不换行
            opacity: 1;
          }

          .frequency {
            height: tovmin(28);
            font-size: tovmin(20);
            font-family: PingFang SC;
            font-weight: 300;
            line-height: tovmin(28);
            color: #ffffff;
            opacity: 1;
          }
        }
      }



      .follow {
        width: tovmin(80);
        height: tovmin(48);
        background: $main_color;
        border-radius: 200px;
        line-height: tovmin(48);
        text-align: center;
        font-size: tovmin(20);
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
        margin-right: tovmin(10);
        opacity: 1;
      }
    }

    .borderBox1 {
      width: tovmin(250);
      height: tovmin(70);
      margin-left: tovmin(10);
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: tovmin(100);
      display: flex;
      justify-content: space-between;
      align-items: center;

      .borderLeft {
        margin-left: tovmin(5);
        display: flex;
        justify-content: space-between;

        .tx {
          width: tovmin(64);
          height: tovmin(64);
          line-height: tovmin(70);
          border-radius: 50%;
          margin-top: tovmin(4);

          .tx_img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }

        .information {
          height: tovmin(70);
          margin-right: tovmin(30);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-left: tovmin(20);

          .ownName {
            max-width: tovmin(140);
            height: tovmin(40);
            font-size: tovmin(27);
            font-family: PingFang SC;
            font-weight: 300;
            line-height: tovmin(40);
            color: #ffffff;
            overflow: hidden; //超出的文本隐藏
            text-overflow: ellipsis; //溢出用省略号显示
            white-space: nowrap; //溢出不换行
            opacity: 1;
          }

          .frequency {
            height: tovmin(28);
            font-size: tovmin(20);
            font-family: PingFang SC;
            font-weight: 300;
            line-height: tovmin(28);
            color: #ffffff;
            opacity: 1;
          }
        }
      }
    }

    .shareItem {
      width: tovmin(140);
      height: tovmin(50);
      margin-left: tovmin(15);
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: tovmin(100);
      display: flex;
      justify-content: space-evenly;
      align-items: center;

      .list_img {
        width: tovmin(20);
        height: tovmin(20);
        // padding-left: tovmin(8);
      }

      .share {
        font-size: tovmin(20);
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
        // padding-right: tovmin(8);
      }
    }

    .updown {
      width: tovmin(80);
      height: tovmin(100);
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: tovmin(15);

      .updown-img {
        width: tovmin(43);
        height: tovmin(25);
        margin: 0 auto;
      }
    }
  }

  // }
}

.liveMsg {
  width: 95%;
  background: rgba(0, 0, 0, 0.7);
  border-radius: tovmin(20);
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 160;

  .closeIcon {
    position: absolute;
    top: tovmin(30);
    right: tovmin(30);
    width: tovmin(25);
    height: tovmin(25);

    .close_img {
      width: 100%;
      height: 100%;
    }
  }

  .title1 {
    width: tovmin(385);
    height: tovmin(50);
    font-size: tovmin(32);
    font-family: PingFang SC;
    font-weight: 400;
    margin-left: tovmin(30);
    margin-top: tovmin(50);
    line-height: tovmin(50);
    color: #ffffff;
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //溢出用省略号显示
    white-space: nowrap; //溢出不换行
    flex: 1;
  }

  .content {
    width: 95%;
    display: flex;
    justify-content: flex-start;
    padding-left: tovmin(30);
    padding-bottom: tovmin(30);

    .ct-left {
      font-size: tovmin(24);
      font-family: PingFang SC;
      font-weight: 300;
      color: #ffffff;
      line-height: tovmin(40);
    }

    .ct-right {
      font-size: tovmin(24);
      font-family: PingFang SC;
      font-weight: 300;
      line-height: tovmin(40);
      color: #ffffff;
      margin-left: tovmin(35);

      .org {
        display: flex;
        justify-content: flex-start;

        .orgName {
          font-size: tovmin(24);
          font-family: PingFang SC;
          font-weight: 300;
          line-height: tovmin(40);
          color: #ffffff;
        }

        .orgStatus {
          width: tovmin(64);
          height: tovmin(28);
          background: $main_color;
          border-radius: tovmin(200);
          font-size: tovmin(14);
          font-family: PingFang SC;
          font-weight: 300;
          line-height: tovmin(28);
          color: #ffffff;
          margin-left: tovmin(30);
          text-align: center;
          margin-top: tovmin(8);
        }
      }
    }
  }

  .tip {
    font-size: tovmin(32);
    font-family: PingFang SC;
    font-weight: 400;
    line-height: tovmin(40);
    color: #ffffff;
    opacity: 1;
    margin-top: tovmin(30);
    padding-left: tovmin(30);
  }

  .tip_ct {
    font-size: tovmin(24);
    font-family: PingFang SC;
    font-weight: 300;
    line-height: tovmin(40);
    color: #ffffff;
    opacity: 1;
    margin: tovmin(30);
  }
}

#countBlock {
  position: absolute;
  top: 11%;
  left: 4%;
  z-index: 99;

  .number {
    min-width: tovmin(180);
    height: tovmin(50);
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 100rpx;
    margin-left: tovmin(-8);
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .num_img {
      width: tovmin(25);
      height: tovmin(25);
      margin-left: tovmin(15);
      margin-right: tovmin(10);
    }

    .num {
      font-size: tovmin(25);
      font-family: PingFang SC;
      font-weight: 300;
      color: #ffffff;
      line-height: tovmin(50);
      padding-right: tovmin(20);
      text-align: center;
    }
  }

  .set {
    width: tovmin(50);
    height: tovmin(50);
    border-radius: 50%;
    margin-top: tovmin(30);
    margin-left: tovmin(-8);

    .set_img {
      width: 100%;
      height: 100%;
    }
  }
}

.startTime {
  border-radius: tovmin(100);
  position: absolute;
  top: 11.1%;
  right: 2%;

  .start {
    width: tovmin(190);
    height: tovmin(54);
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: tovmin(100);
    margin-left: tovmin(-8);
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .stop_img {
      width: tovmin(54);
      height: tovmin(54);
    }

    .allTime {
      font-size: tovmin(25);
      font-family: PingFang SC;
      font-weight: 300;
      color: #ffffff;
      line-height: tovmin(54);
      padding-left: tovmin(20);
    }
  }
}

.showButton {
  width: tovmin(80);
  height: tovmin(100);
  position: absolute;
  top: 11.1%;
  right: 3%;

  .show {
    width: tovmin(50);
    height: tovmin(50);
    margin: 0 auto;

    .show_img {
      width: 100%;
      height: 100%;
    }
  }

  .showText {
    width: tovmin(80);
    height: tovmin(28);
    font-size: tovmin(20);
    font-family: PingFang SC;
    font-weight: 300;
    color: #ffffff;
    opacity: 1;
    text-align: center;
    margin-top: tovmin(15);
  }
}

.playing {
  width: 130px;
  height: 135px;
  background: #000000;
  opacity: 0.5;
  border-radius: 10px;
  position: absolute;
  top: 11.1%;
  right: 3%;

  .play {
    width: 130px;
    height: 135px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    position: relative;

    .playing_img {
      width: 64px;
      height: 71px;
      margin-top: 5px;
    }

    .running {
      font-size: 20px;
      font-family: PingFang SC;
      font-weight: 300;
      line-height: 32px;
      color: #ffffff;
      opacity: 1;
    }
  }

  .play::after {
    content: "";
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: $main_color;
    position: absolute;
    top: 5px;
    right: 15px;
  }
}

.playing2 {
  width: tovmin(130);
  height: tovmin(135);
  background: #000000;
  opacity: 0.5;
  border-radius: tovmin(10);
  position: absolute;
  top: 11.1%;
  right: 3%;

  .play {
    width: tovmin(130);
    height: tovmin(135);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    position: relative;

    .playing_img {
      width: tovmin(64);
      height: tovmin(71);
      margin-top: tovmin(5);
    }

    .running {
      font-size: tovmin(20);
      font-family: PingFang SC;
      font-weight: 300;
      line-height: tovmin(32);
      color: #ffffff;
      opacity: 1;
    }
  }

  .play::after {
    content: "";
    width: tovmin(24);
    height: tovmin(24);
    border-radius: 50%;
    background-color: $main_color;
    position: absolute;
    top: 5px;
    right: 15px;
  }
}

.background {
  width: tovmin(250);
  height: tovmin(148);
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);

  .logoImg {
    width: 100%;
    height: 100%;
  }
}

#centerBlock {
  width: tovmin(500);
  height: tovmin(300);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 90;
  display: flex;
  flex-direction: column;

  .center-top {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    .tip {
      height: tovmin(56);
      font-size: tovmin(40);
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      text-align: center;
      line-height: tovmin(56);
    }

    .time {
      height: tovmin(45);
      font-size: tovmin(32);
      font-family: PingFang SC;
      font-weight: 300;
      color: #ffffff;
      text-align: center;
      line-height: tovmin(45);
      margin-top: tovmin(25);
    }
  }

  .begin {
    width: tovmin(400);
    height: tovmin(80);
    background: $main_color;
    box-shadow: tovmin(2) tovmin(4) tovmin(20) rgba(0, 0, 0, 0.1);
    opacity: 1;
    border-radius: tovmin(10);
    font-size: tovmin(32);
    font-family: PingFang SC;
    font-weight: 300;
    line-height: tovmin(80);
    color: #ffffff;
    margin-top: tovmin(30);
  }
}

.timeModel {
  width: 100vw;
  height: calc(100vh);
  background: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;

  .biginTime {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: tovmin(160);
    font-family: PingFang SC;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
  }
}

#msgBlock {
  position: absolute;
  bottom: 3%;
  left: 4%;
  overflow: hidden;

  .contentMsg {
    width: tovmin(500);
    height: tovmin(300);
    position: fixed;
    bottom: 8%;
    left: 4%;
    display: flex;
    flex-wrap: wrap;
    z-index: 100;

    .msgBox {
      .msg-column-item {
        display: inline-block;
        padding: tovmin(10);
        margin-bottom: tovmin(10);
        background: rgba(0, 0, 0, 0.3);
        border-radius: tovmin(10);
        font-size: tovmin(24);
        font-family: PingFang SC;
        font-weight: 300;
        color: #ffffff;
        line-height: tovmin(30);
        text-align: left;
        opacity: 1;
      }

      .nick {
        font-size: tovmin(24);
        font-family: PingFang SC;
        font-weight: 300;
        line-height: tovmin(32);
        color: #ffffff;
        opacity: 0.6;
      }

      .msgText {
        font-size: tovmin(24);
        font-family: PingFang SC;
        font-weight: 300;
        line-height: tovmin(32);
        color: #ffffff;
        opacity: 1;
      }
    }
  }

  .border {
    width: 256rpx;
    height: 60rpx;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10rpx;
    margin-top: 150rpx;
    text-align: center;
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 300;
    line-height: 60rpx;
    color: #ffffff;
  }

  .bottom {
    width: tovmin(375);
    height: tovmin(68);
    margin-bottom: tovmin(1);
    margin-left: tovmin(-2);
    border-radius: tovmin(10);
    background: rgba(0, 0, 0, 0.3);

    .input {
      width: tovmin(400);
      height: tovmin(68);
      border-radius: tovmin(10);
      font-size: tovmin(24);
      font-family: PingFang SC;
      font-weight: 300;
      line-height: tovmin(68);
      color: #ffffff;
      padding-left: tovmin(15);
    }
  }
}

.newMsg {
  width: tovmin(108);
  height: tovmin(36);
  background: $main_color;
  opacity: 1;
  border-radius: tovmin(200);
  margin-bottom: tovmin(-20);
  display: flex;
  justify-content: space-around;
  position: fixed;
  left: 4%;
  bottom: 9%;
  z-index: 188;

  .updown {
    width: tovmin(15);
    height: tovmin(15);
    margin-top: tovmin(12);
    margin-left: tovmin(5);
  }

  .newText {
    font-size: tovmin(18);
    font-weight: 300;
    line-height: tovmin(36);
    color: #ffffff;
    padding-right: tovmin(5);
    opacity: 1;
  }
}

.inputMsg {
  position: fixed;
  width: 100%;
  height: tovmin(150);
  background: #ffffff;
  display: flex;
  align-items: center;
  padding: tovmin(18) tovmin(30);
  justify-content: center;
  z-index: 100;

  .input-box {
    width: 80%;
    min-height: tovmin(60);
    max-height: tovmin(100);
    background: #f4f4f4;
    border-radius: tovmin(20);
    padding-top: tovmin(10);
    padding-right: tovmin(30);

    .input-text {
      width: 100%;
      height: tovmin(100);
      padding: 0 tovmin(30);
      font-size: tovmin(28);
      line-height: tovmin(40);
      overflow: scroll;
    }
  }

  .send-bnt {
    width: 20%;
    height: 100%;
    padding: tovmin(10) 0px;
    font-size: tovmin(32);
    font-family: PingFang SC;
    font-weight: bold;
    line-height: tovmin(150);
    color: $main_color;
    padding-left: tovmin(30);
  }
}

#likeBlock {
  position: absolute;
  bottom: 3%;
  right: 4%;

  .right {
    width: tovmin(350);
    height: tovmin(100);
    display: flex;
    justify-content: space-between;
    margin-right: tovmin(-18);

    .config_img {
      width: tovmin(64);
      height: tovmin(64);
      padding-top: tovmin(33);
      padding-right: tovmin(16);
      margin-left: auto;
    }

    .sign_img {
      width: tovmin(64);
      height: tovmin(64);
      padding-top: tovmin(33);
      padding-right: tovmin(16);
    }

    .share_img {
      width: tovmin(64);
      height: tovmin(64);
      padding-top: tovmin(33);
      padding-right: tovmin(16);
    }

    .ider {
      width: tovmin(80);
      height: tovmin(100);
      position: relative;

      .ider_img {
        width: tovmin(64);
        height: tovmin(64);
        padding-top: tovmin(32);
      }

      .inputBox {
        width: tovmin(100);
        height: tovmin(40);
        border-radius: tovmin(60);
        background: #fff;
        position: absolute;
        top: tovmin(-10);
        right: tovmin(0);
        z-index: 65;

        .shuzi {
          font-size: tovmin(24);
          font-family: PingFang SC;
          font-weight: 300;
          line-height: tovmin(40);
          color: $main_color;
          text-align: center;
        }
      }
    }

    .addLike {
      width: tovmin(64);
      height: tovmin(64);
      position: absolute;
      top: tovmin(31);
      right: tovmin(-2);
      z-index: 30;

      .addLike-img {
        width: tovmin(64);
        height: tovmin(64);
        // transform:scale(1, 1)
      }
    }
  }
}

.at-modal__content {
  min-height: 100px;
}

.content-simple {
  font-size: tovmin(32);
  font-family: PingFang SC;
  font-weight: 300;
  color: #333333;
  opacity: 1;
  text-align: center;
}

// .at-modal__footer .at-modal__action > wx-button {
// }

// .at-modal__footer .at-modal__footer--simple{
//   width: tovmin(300);
//   height: tovmin(42);
// }

// .at-modal__footer .at-modal__action {
//    width: tovmin(300);
//   height: tovmin(42);
// }

.at-modal__footer .at-modal__action>wx-button {
  font-size: tovmin(28);
}

.at-modal__footer--simple .at-modal__action>button:last-child:nth-child(2) {
  color: $main_color;
  font-size: tovmin(28);
}

.at-float-layout__container {
  background: #000;

  .layout-header {
    background: #000;
    text-align: center;
  }

  .layout-header__title {
    color: #ffffff;
  }

  .at-grid-item__content-inner {
    color: #fff;
  }

  .head {
    width: 100%;
    display: flex;

    .head-title {
      font-size: tovmin(36);
      font-weight: 500;
      color: #ffffff;
      opacity: 1;
      text-align: center;
    }

    .layout-header__btn-close {
      width: tovmin(30);
      height: tovmin(30);
    }
  }

  .bt-title {
    font-size: tovmin(32);
    font-weight: 500;
    line-height: tovmin(32);
    color: #ffffff;
    opacity: 1;
    margin-top: tovmin(20);
    padding-left: tovmin(30);
    text-align: left;
  }

  .at-grid-item__content {
    padding-left: tovmin(30);
    width: tovmin(100);
  }

  .content-inner__text {
    font-size: tovmin(24);
    font-family: PingFang SC;
    font-weight: 300;
    line-height: tovmin(32);
    color: #ffffff;
    opacity: 1;
  }

  .down {
    width: tovmin(50);
    height: tovmin(55);
    margin: 0 auto;

    .down-img {
      width: tovmin(30);
      height: tovmin(23);
      margin: 0 auto;
    }
  }
}

.content {
  width: tovmin(680);
  height: tovmin(50);
  margin: tovmin(40) auto 0;
  display: flex;
  justify-content: space-between;

  .file {
    width: tovmin(38);
    height: tovmin(48);

    .file-img {
      width: 100%;
      height: 100%;
    }
  }

  .flieName {
    width: tovmin(345);
    font-size: tovmin(32);
    font-family: PingFang SC;
    font-weight: 300;
    line-height: tovmin(50);
    color: #ffffff;
    margin-left: tovmin(20);
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //溢出用省略号显示
    white-space: nowrap; //溢出不换行
    margin-right: auto;
  }

  .upload {
    width: tovmin(180);
    height: tovmin(48);
    // background: linear-gradient(140deg, #ed3333 0%, #d20202 100%);
    background: $main_color;
    border-radius: tovmin(10);
    font-size: tovmin(24);
    font-family: PingFang SC;
    font-weight: 300;
    line-height: tovmin(48);
    color: #ffffff;
    margin-left: tovmin(20);
    text-align: center;
  }

  .delete {
    width: tovmin(180);
    height: tovmin(48);
    background: #9a9a9a;
    border-radius: 10px;
    font-size: tovmin(24);
    font-family: PingFang SC;
    font-weight: 300;
    line-height: tovmin(48);
    color: #ffffff;
    margin-left: tovmin(20);
  }
}

.uploadFile {
  width: tovmin(690);
  height: tovmin(80);
  // background: linear-gradient(140deg, #ed3333 0%, #d20202 100%);
  background: $main_color;
  box-shadow: tovmin(2) tovmin(4) tovmin(20) rgba(0, 0, 0, 0.1);
  opacity: 1;
  border-radius: tovmin(10);
  font-size: tovmin(32);
  font-family: PingFang SC;
  font-weight: 300;
  line-height: tovmin(80);
  color: #ffffff;
  margin-top: tovmin(35);
}

.settingModel {
  width: tovmin(300);
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  background: #000;
  z-index: 9999;

  .topBox {
    position: absolute;
    top: 0;
    left: 10%;

    .contentBox {
      display: flex;
      justify-content: center;
      align-items: center;

      .none {
        width: tovmin(15);
        height: tovmin(30);
        margin-top: tovmin(15);
      }
    }
  }

  .bottomBox {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;

    .topTitle {
      font-size: tovmin(32);
      font-weight: 500;
      line-height: tovmin(32);
      color: #ffffff;
      opacity: 1;
      margin-top: tovmin(20);
      padding-left: tovmin(30);
      text-align: center;
    }

    .itemBox {
      width: tovmin(300);
      display: flex;
      flex-direction: column;
      text-align: center;
      align-items: center;

      .item {
        width: tovmin(300);
        display: flex;
        justify-content: space-around;
        margin-top: tovmin(30);

        .itemImg {
          width: tovmin(48);
          height: tovmin(48);
        }

        .itemTitle {
          font-size: tovmin(32);
          font-family: PingFang SC;
          font-weight: 300;
          color: #ffffff;
          opacity: 1;
        }
      }
    }
  }
}

.settingFiles {
  width: tovmin(460);
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  background: #000;
  z-index: 9999;

  .iconBox {
    position: absolute;
    top: 0;
    left: 10%;

    .headBox {
      display: flex;
      justify-content: center;
      align-items: center;

      .none {
        width: tovmin(30);
        height: tovmin(30);
        margin-top: tovmin(15);
      }
    }
  }

  .filesBox {
    width: tovmin(460);
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

    .scroll {
      width: 100%;
      height: 100%;

      .box1 {
        width: tovmin(460);

        .content {
          width: tovmin(460);
          height: tovmin(50);
          display: flex;
          justify-content: space-around;

          .fileIcon {
            width: tovmin(38);
            height: tovmin(48);

            .file-img {
              width: 100%;
              height: 100%;
            }
          }

          .fliesName {
            width: tovmin(345);
            font-size: tovmin(32);
            font-family: PingFang SC;
            font-weight: 300;
            line-height: tovmin(50);
            color: #ffffff;
            overflow: hidden; //超出的文本隐藏
            text-overflow: ellipsis; //溢出用省略号显示
            white-space: nowrap; //溢出不换行
          }
        }

        .but {
          width: tovmin(460);
          height: tovmin(50);
          display: flex;
          justify-content: center;
          margin-top: tovmin(30);

          .uploading {
            width: tovmin(160);
            height: tovmin(48);
            // background: linear-gradient(140deg, #ed3333 0%, #d20202 100%);
            background: $main_color;
            border-radius: tovmin(10);
            font-size: tovmin(24);
            font-family: PingFang SC;
            font-weight: 300;
            line-height: tovmin(48);
            color: #ffffff;
            text-align: center;
          }

          .deleted {
            width: tovmin(160);
            height: tovmin(48);
            background: #9a9a9a;
            border-radius: 10px;
            font-size: tovmin(24);
            font-family: PingFang SC;
            font-weight: 300;
            line-height: tovmin(48);
            color: #ffffff;
          }
        }
      }
    }

    .box1:last-child {
      margin-bottom: tovmin(30);
    }

    .uploadFile {
      width: tovmin(400);
      height: tovmin(80);
      // background: linear-gradient(140deg, #ed3333 0%, #d20202 100%);
      background: $main_color;
      box-shadow: tovmin(2) tovmin(4) tovmin(20) rgba(0, 0, 0, 0.1);
      opacity: 1;
      border-radius: tovmin(10);
      font-size: tovmin(32);
      font-family: PingFang SC;
      font-weight: 300;
      line-height: tovmin(80);
      color: #ffffff;
      margin-top: tovmin(35);
    }
  }
}

.modelBox {
  width: 100vw;
  height: calc(100vh);
  background: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;

  .tipsBox {
    width: tovmin(560);
    height: tovmin(322);
    background: #ffffff;
    opacity: 1;
    border-radius: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .tipsContent {
      width: tovmin(560);
      min-height: tovmin(180);
      font-size: tovmin(32);
      font-family: PingFang SC;
      font-weight: 300;
      line-height: tovmin(180);
      color: #333333;
      opacity: 1;
      text-align: center;
      border-bottom: solid #e5e5e5 1px;
    }

    .tipsButton {
      width: tovmin(560);
      height: tovmin(140);
      display: flex;
      justify-content: space-between;

      .cancelText {
        width: tovmin(560);
        height: tovmin(140);
        font-size: tovmin(28);
        font-family: PingFang SC;
        font-weight: bold;
        line-height: tovmin(140);
        color: #333333;
        text-align: center;
        border-right: solid #e5e5e5 1px;
      }

      .confirmText {
        width: tovmin(560);
        height: tovmin(140);
        font-size: tovmin(28);
        font-family: PingFang SC;
        font-weight: bold;
        line-height: tovmin(140);
        color: $main_color;
        text-align: center;
      }
    }
  }
}

//去掉scrollView滚动条
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

//分享榜单
.shareBox {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;

  .shareList {
    width: 750px;
    height: 1002px;
    background: #ffffff;
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: 1;
    border-radius: 40px 40px 0px 0px;

    .shareTitle {
      width: 100%;
      height: 100px;
      border-bottom: 1px solid #e6e6e6;
      text-align: center;
      position: relative;

      .text {
        font-size: 36px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 100px;
        color: #333333;
        opacity: 1;
      }

      .closeButton {
        width: 25px;
        height: 25px;
        position: absolute;
        top: 30px;
        right: 30px;

        .close_img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .shareCenter {
      width: 750px;
      height: 750px;

      .shareContent {
        width: 690px;
        height: 100px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: 30px auto 0;

        .shareContent-left {
          height: 100px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .ranking {
            font-size: 36px;
            font-family: PingFang SC;
            font-weight: 400;
            line-height: 0px;
            color: #333333;
            opacity: 1;
          }

          .UserAvatar {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            margin-left: 30px;
            position: relative;

            .avatar_img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }

          .useName {
            font-size: 32px;
            font-family: PingFang SC;
            font-weight: 400;
            line-height: 0px;
            color: #333333;
            margin-left: 30px;
            opacity: 1;
          }
        }

        .shareContent-right {
          width: 200px;
          height: 100px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          margin-left: auto;

          .shareTimes {
            font-size: 28px;
            font-family: PingFang SC;
            font-weight: 300;
            line-height: 0px;
            color: #999999;
            opacity: 1;
          }

          .shareNum {
            font-size: 28px;
            font-family: PingFang SC;
            font-weight: 400;
            line-height: 0px;
            color: #333333;
            opacity: 1;
          }
        }
      }
    }

    .shareContent:nth-child(1) {
      .ranking {
        font-size: 36px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 0px;
        color: #ffe64f;
        opacity: 1;
      }

      .UserAvatar {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        margin-left: 30px;
        position: relative;
        border: solid 1px #ffe64f;

        .avatar_img {
          width: 100%;
          height: 100%;
        }
      }

      .UserAvatar::after {
        content: "";
        width: 37px;
        height: 35px;
        position: absolute;
        top: -10px;
        left: -20px;
        background: url(https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/crown1.png) no-repeat center center;
        background-size: cover;
      }
    }

    .shareContent:nth-child(2) {
      .ranking {
        font-size: 36px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 0px;
        color: #8ec1de;
        opacity: 1;
      }

      .UserAvatar {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        margin-left: 30px;
        position: relative;
        border: solid 2px #8ec1de;

        .avatar_img {
          width: 100%;
          height: 100%;
        }
      }

      .UserAvatar::after {
        content: "";
        width: 37px;
        height: 35px;
        position: absolute;
        top: -10px;
        left: -20px;
        background: url(https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/crown2.png) no-repeat center center;
        background-size: cover;
      }
    }

    .shareContent:nth-child(3) {
      .ranking {
        font-size: 36px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 0px;
        color: #f3bc61;
        opacity: 1;
      }

      .UserAvatar {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        margin-left: 30px;
        position: relative;
        border: solid 2px #f3bc61;

        .avatar_img {
          width: 100%;
          height: 100%;
        }
      }

      .UserAvatar::after {
        content: "";
        width: 37px;
        height: 35px;
        position: absolute;
        top: -10px;
        left: -20px;
        background: url(https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/crown3.png) no-repeat center center;
        background-size: cover;
      }
    }

    .ownShare {
      width: 750px;
      height: 130px;
      background: #ffffff;
      box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.16);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 15px;
      opacity: 1;

      .ownShare-left {
        height: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-left: 30px;

        .rankings {
          font-size: 36px;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 0px;
          color: #ffe64f;
          opacity: 1;
        }

        .UserAva {
          width: 90px;
          height: 90px;
          border-radius: 50%;
          margin-left: 30px;

          .avatar_img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }

        .useNames {
          font-size: 32px;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 0px;
          color: #333333;
          margin-left: 30px;
          opacity: 1;
        }
      }

      .ownShare-right {
        width: 160px;
        height: 64px;
        // background: linear-gradient(134deg, #ed3333 0%, #d20202 100%);
        background: $main_color;
        box-shadow: 2px 4px 20px rgba(0, 0, 0, 0.1);
        border-radius: 200px;
        margin-right: 30px;
        font-size: 28px;
        font-family: PingFang SC;
        font-weight: 300;
        line-height: 64px;
        text-align: center;
        color: #ffffff;
        opacity: 1;
      }
    }
  }
}

//竖屏文件演示样式
.fileBox {
  width: 750px;
  padding-bottom: 30px;
  background: #121212;
  opacity: 1;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 885;

  .fileHead {
    width: 100%;
    height: 100px;
    margin-left: 30px;

    .fileTop {
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .back {
        width: 15px;
        height: 30px;
      }

      .return {
        font-size: 32px;
        font-family: PingFang SC;
        font-weight: 300;
        color: #ffffff;
        margin-left: 30px;
        opacity: 1;
      }
    }

  }


  .test-h {
    width: 100vw;
    height: 424px;

    .swiperItem {
      width: 100vw;
      height: 424px;

      .Images {
        width: 100vw;
        height: 424px;
        position: relative;

        .areaImg {
          width: 100vw;
          height: 424px;
        }

        .pages {
          width: 100px;
          height: 44px;
          background: #000000;
          opacity: 0.4;
          border-radius: 200px;
          font-size: 24px;
          font-family: PingFang SC;
          font-weight: 300;
          line-height: 44px;
          text-align: center;
          color: #ffffff;
          position: absolute;
          right: 30px;
          bottom: 20px;
          z-index: 900;
        }
      }
    }
  }

  .fileBttom {
    width: 100vw;
    height: 100px;

    .fileBt {
      width: 100vw;
      height: 100px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;

      .btLeft {
        width: 330px;
        height: 80px;
        // background: linear-gradient(134deg, #ed3333 0%, #d20202 100%);
        background: $main_color;
        box-shadow: 2px 4px 20px rgba(0, 0, 0, 0.1);
        opacity: 1;
        border-radius: 10px;
        font-size: 32px;
        font-family: PingFang SC;
        font-weight: 300;
        line-height: 80px;
        text-align: center;
        color: #ffffff;
        letter-spacing: 30px;
      }

      .btRight {
        width: 330px;
        height: 80px;
        // background: linear-gradient(134deg, #ed3333 0%, #d20202 100%);
        background: $main_color;
        box-shadow: 2px 4px 20px rgba(0, 0, 0, 0.1);
        opacity: 1;
        border-radius: 10px;
        font-size: 32px;
        font-family: PingFang SC;
        font-weight: 300;
        line-height: 80px;
        text-align: center;
        color: #ffffff;
        letter-spacing: 30px;
      }
    }
  }

}

//观众端竖屏文件演示样式
.synBox {
  width: 750px;
  padding-bottom: 30px;
  background: #121212;
  opacity: 1;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 885;

  .fileTop {
    width: 100%;
    height: 100px;
    background: #000000;
    opacity: 0.4;
    border-radius: 200px;
    margin-left: 30px;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .back {
      width: 15px;
      height: 30px;
    }

    .return {
      font-size: 32px;
      font-family: PingFang SC;
      font-weight: 300;
      color: #ffffff;
      margin-left: 30px;
      opacity: 1;
    }
  }

  .area {
    width: 100vw;
    height: 424px;
    opacity: 1;
    position: relative;

    .Images {
      width: 100vw;
      height: 424px;

      .areaImg {
        width: 100vw;
        height: 424px;
      }
    }

    .pages {
      width: 100px;
      height: 44px;
      background: #000000;
      opacity: 0.4;
      border-radius: 200px;
      font-size: 24px;
      font-family: PingFang SC;
      font-weight: 300;
      line-height: 44px;
      text-align: center;
      color: #ffffff;
      position: absolute;
      right: 30px;
      bottom: 20px;
      z-index: 900;
    }
  }
}

//观众端横屏文件演示样式
.synBox1 {
  width: 100vw;
  height: calc(100vh);
  background: #121212;
  opacity: 1;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9996;

  .topfileBox {
    width: tovmin(150);
    height: tovmin(55);
    background: #000000;
    opacity: 0.4;
    border-radius: 200px;
    position: absolute;
    top: tovmin(30);
    left: tovmin(30);

    .fileTop {
      width: tovmin(150);
      height: tovmin(55);
      background: #000000;
      opacity: 0.4;
      border-radius: 200px;
      margin-left: tovmin(30);
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .back {
        width: tovmin(15);
        height: tovmin(30);
      }

      .return {
        font-size: tovmin(32);
        font-family: PingFang SC;
        font-weight: 300;
        color: #ffffff;
        margin-left: tovmin(30);
        opacity: 1;
      }
    }
  }

  .area {
    width: 100vw;
    height: calc(100vh);
    opacity: 1;
    position: relative;

    .Images {
      width: 100vw;
      height: 100%;

      .areaImg {
        width: 100vw;
        height: 100%;
      }
    }

    .pages {
      width: tovmin(100);
      height: tovmin(44);
      background: #000000;
      opacity: 0.4;
      border-radius: tovmin(200);
      font-size: tovmin(24);
      font-family: PingFang SC;
      font-weight: 300;
      line-height: tovmin(44);
      text-align: center;
      color: #ffffff;
      position: absolute;
      right: tovmin(30);
      bottom: tovmin(20);
      z-index: 900;
    }
  }
}

//横屏文件演示样式 
.fileBox1 {
  width: 100vw;
  height: calc(100vh);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9996;

  .fileHead {
    width: tovmin(150);
    height: tovmin(55);
    position: absolute;
    top: tovmin(30);
    left: tovmin(30);
    z-index: 9999;

    .fileTop {
      width: tovmin(150);
      height: tovmin(55);
      background: #000000;
      opacity: 0.4;
      border-radius: 200px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;

      .back {
        width: tovmin(15);
        height: tovmin(30);
      }

      .return {
        font-size: tovmin(32);
        font-family: PingFang SC;
        font-weight: 300;
        color: #ffffff;
        opacity: 1;
      }
    }
  }

  .test-h {
    width: 100vw;
    height: calc(100vh);
    position: relative;

    .swiperItem {
      width: 100vw;
      height: calc(100vh);
      position: relative;

      .areaImg {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 9998;
      }

      .pages {
        width: tovmin(100);
        height: tovmin(44);
        background: #000000;
        opacity: 0.4;
        border-radius: tovmin(200);
        font-size: tovmin(24);
        font-family: PingFang SC;
        font-weight: 300;
        line-height: tovmin(44);
        text-align: center;
        color: #ffffff;
        position: absolute;
        right: tovmin(60);
        bottom: tovmin(60);
        z-index: 9999;
      }
    }
  }

  .fileBttom {
    width: 100%;
    height: tovmin(100);
    position: absolute;
    left: tovmin(80);
    bottom: tovmin(20);
    z-index: 999;

    .fileBt {
      width: 100vw;
      height: tovmin(100);
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .btLeft {
        width: tovmin(330);
        height: tovmin(80);
        // background: linear-gradient(134deg, #ed3333 0%, #d20202 100%);
        background: $main_color;
        box-shadow: tovmin(2) tovmin(4) tovmin(20) rgba(0, 0, 0, 0.1);
        opacity: 1;
        border-radius: tovmin(10);
        font-size: tovmin(32);
        font-family: PingFang SC;
        font-weight: 300;
        line-height: tovmin(80);
        text-align: center;
        color: #ffffff;
        letter-spacing: tovmin(30);
      }

      .btRight {
        width: tovmin(330);
        height: tovmin(80);
        // background: linear-gradient(134deg, #ed3333 0%, #d20202 100%);
        background: $main_color;
        box-shadow: tovmin(2) tovmin(4) tovmin(20) rgba(0, 0, 0, 0.1);
        opacity: 1;
        border-radius: tovmin(10);
        font-size: tovmin(32);
        font-family: PingFang SC;
        font-weight: 300;
        line-height: tovmin(80);
        margin-left: tovmin(30);
        text-align: center;
        color: #ffffff;
        letter-spacing: tovmin(30);
      }
    }
  }
}

//回放文件演示区域
.synEnded {
  width: 750px;
  background: #121212;
  opacity: 1;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 885;

  .area {
    width: 100vw;
    height: 424px;
    opacity: 1;
    position: relative;

    .Images {
      width: 100vw;
      height: 424px;

      .areaImg {
        width: 100vw;
        height: 424px;
      }
    }

    .pages {
      width: 100px;
      height: 44px;
      background: #000000;
      opacity: 0.4;
      border-radius: 200px;
      font-size: 24px;
      font-family: PingFang SC;
      font-weight: 300;
      line-height: 44px;
      text-align: center;
      color: #ffffff;
      position: absolute;
      right: 30px;
      bottom: 20px;
      z-index: 900;
    }
  }
}

.playing1 {
  width: 130px;
  height: 135px;
  background: #000000;
  opacity: 0.5;
  border-radius: 10px;
  position: absolute;
  top: 20%;
  right: 3%;

  .play {
    width: 130px;
    height: 135px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    position: relative;

    .playing_img {
      width: 64px;
      height: 71px;
      margin-top: 5px;
    }

    .running {
      font-size: 20px;
      font-family: PingFang SC;
      font-weight: 300;
      line-height: 32px;
      color: #ffffff;
      opacity: 1;
    }
  }

  .play::after {
    content: "";
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: $main_color;
    position: absolute;
    top: 5px;
    right: 15px;
  }
}

.playing3 {
  width: tovmin(130);
  height: tovmin(135);
  background: #000000;
  opacity: 0.5;
  border-radius: tovmin(10);
  position: absolute;
  top: 20%;
  right: 3%;

  .play {
    width: tovmin(130);
    height: tovmin(135);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    position: relative;

    .playing_img {
      width: tovmin(64);
      height: tovmin(71);
      margin-top: tovmin(5);
    }

    .running {
      font-size: tovmin(20);
      font-family: PingFang SC;
      font-weight: 300;
      line-height: tovmin(32);
      color: #ffffff;
      opacity: 1;
    }
  }

  .play::after {
    content: "";
    width: tovmin(24);
    height: tovmin(24);
    border-radius: 50%;
    background-color: $main_color;
    position: absolute;
    top: 5px;
    right: 15px;
  }
}

// 语音直播的头像
.type-audio {
  position: relative;
  top: 40%;
  left: 50%;
  width: 300px;
  height: 300px;
  transform: translate(-50%, -50%);

  .type-audio-img {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 8px solid #f8f8f8;
  }

  .type-audio-name {
    // width: 168px;
    width: 100%;
    height: 59px;
    font-size: 42px;
    font-family: ".PingFang SC";
    font-weight: 500;
    line-height: 59px;
    color: #ffffff;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .type-audio-icon {
    position: absolute;
    top: 85%;
    right: 5%;
    width: 50px;
    height: 50px;
  }
}

.inviteContent {
  // position: relative; 弹窗不能加定位，直播中会不显示
  // bottom: 0px;
  // right: 0px;
  // box-sizing: border-box;
  width: 100%;

  // padding: 10px;
  // .invite-box {
  //   width: 100%;
  //   height: 100%;
  // }
  .invite-title {
    display: flex;
    margin: 30px 0;

    .invite-title-img {
      // line-height: 30px;
      margin: 5px 10px;
      margin-top: 10px;
      width: 18px;
      height: 34px;
    }

    .invite-title-name {
      width: 100%;
      height: 50px;
      font-size: 36px;
      font-family: ".PingFang SC";
      font-weight: 500;
      line-height: 51px;
      color: #ffffff;
      opacity: 1;
      text-align: center;
    }
  }

  .invite-search {
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    width: 98%;
    margin: 15px 10px;

    .invite-ipt {
      box-sizing: border-box;
      width: 80%;
      height: 64px;
      padding: 10px;
      line-height: 64px;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      background: #ffffff;
      // opacity: 1;
    }

    .invite-search-btn {
      width: 20%;
      height: 64px;
      background-color: $main_color;
      border-radius: 0px 10px 10px 0px;
      margin-left: -2px;
      font-size: 28px;
      font-family: ".PingFang SC";
      font-weight: 300;
      line-height: 64px;
      color: #ffffff;
    }
  }

  .invite-list {
    height: 650px;
    width: 100%;
    margin: 20px 0;

    .invite-list-item {
      box-sizing: border-box;
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: flex-start;
      padding: 0px 10px;
      margin: 30px 0px;
      align-items: center;

      .invite-list-item-img {
        width: 100px;
        height: 100px;

        image {
          width: 100px;
          height: 100px;
          border-radius: 50%;
        }
      }

      .invite-list-item-content {
        margin: 0 20px;
        flex: 1;

        .item-content-name {
          height: 45px;
          font-size: 32px;
          font-family: ".PingFang SC";
          font-weight: 600;
          line-height: 32px;
          color: #ffffff;
          opacity: 1;
        }

        .item-content-phone {
          height: 28px;
          font-size: 20px;
          font-family: ".PingFang SC";
          font-weight: 300;
          line-height: 25px;
          color: #ffffff;
          opacity: 1;
        }
      }

      .invite-list-item-status {
        // box-sizing: border-box;
        width: 150px;
        height: 54px;
        line-height: 54px;
        background-color: $main_color;
        border-radius: 8px;
        color: #fff;
        // padding: 10px 0px;
        font-size: 24px;
        font-family: ".PingFang SC";
        font-weight: 300;
        // line-height: 54px;
        color: #ffffff;
        text-align: center;
      }

      .disable {
        background-color: #999;
      }
    }
  }
}
